﻿@{
    ViewBag.Title = "Calendar";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--头部-->
<div id="Header" class="ajaxLoadDiv">
    @{Html.RenderAction("Top");}
</div>
<div class="g-wrap">
    <div id="Left" class="ajaxLoadDiv" name="leftnav01">
        @{ Html.RenderPartial("Left");}
    </div>

    <div class="g-main">
        <div class="layout_content_main">
            <!--面包屑start-->
            <div class="mod_navbar f-clear">
                <!--标题start-->
                <div class="title">
                    <h3>
                        <i class="icon-calendar mr_10"></i>日历
                    </h3>
                </div>
                <!--标题end-->
                <div class="main f-tac">
                    <span id="calendar_title_warp"> <a href="javascript:;"><i class="icon-chevron-left"></i></a><h4 id="calendar_title" class="help-inline p_0">2015年06月</h4> <a href="javascript:;"><i class="icon-chevron-right"></i></a></span>
                    <div class="f-right">
                        <button class="btn btn-danger js-popbox mr_15"> 新建日程 </button>
                        <div class="btn-group mr_15">
                            <button class="btn active monthbtn">月 </button>
                            <button class="btn weekbtn">周 </button>
                        </div>
                        <button class="btn" id="righttoggle"> <i class="icon-step-forward"></i> </button>
                    </div>
                </div>
            </div>
            <!--面包屑end-->
            <div class="layout_content_main_nonav">
                <dl class="frame">
                    <!--日历start-->
                    <div id="calendar">
                        <div class="fc-view fc-view-month fc-grid">
                            <table width="100%" cellspacing="0" border="0" cellpadding="0">
                                <thead>
                                    <tr class="fc-first fc-last">
                                        <th class="fc-day-header fc-sun fc-widget-header fc-first">星期日</th>
                                        <th class="fc-day-header fc-mon fc-widget-header">星期一</th>
                                        <th class="fc-day-header fc-tue fc-widget-header">星期二</th>
                                        <th class="fc-day-header fc-wed fc-widget-header">星期三</th>
                                        <th class="fc-day-header fc-thu fc-widget-header">星期四</th>
                                        <th class="fc-day-header fc-fri fc-widget-header">星期五</th>
                                        <th class="fc-day-header fc-sat fc-widget-header fc-last">星期六</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="fc-week fc-first">
                                        <td class="fc-day fc-sun fc-widget-content fc-other-month fc-past fc-first">
                                            <div style="min-height: 155px;">
                                                <div class="fc-day-number">31</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-mon fc-widget-content fc-past">
                                            <div>
                                                <div class="fc-day-number">1</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-tue fc-widget-content fc-today fc-state-highlight">
                                            <div>
                                                <div class="fc-day-number">2</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-wed fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">3</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-thu fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">4</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-fri fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">5</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-sat fc-widget-content fc-future fc-last">
                                            <div>
                                                <div class="fc-day-number">6</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="fc-week">
                                        <td class="fc-day fc-sun fc-widget-content fc-future fc-first">
                                            <div style="min-height: 154px;">
                                                <div class="fc-day-number">7</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-mon fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">8</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-tue fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">9</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-wed fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">10</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-thu fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">11</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-fri fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">12</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-sat fc-widget-content fc-future fc-last">
                                            <div>
                                                <div class="fc-day-number">13</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="fc-week">
                                        <td class="fc-day fc-sun fc-widget-content fc-future fc-first">
                                            <div style="min-height: 154px;">
                                                <div class="fc-day-number">14</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-mon fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">15</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-tue fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">16</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-wed fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">17</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-thu fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">18</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-fri fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">19</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-sat fc-widget-content fc-future fc-last">
                                            <div>
                                                <div class="fc-day-number">20</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="fc-week">
                                        <td class="fc-day fc-sun fc-widget-content fc-future fc-first">
                                            <div style="min-height: 154px;">
                                                <div class="fc-day-number">21</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-mon fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">22</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-tue fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">23</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-wed fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">24</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-thu fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">25</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-fri fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">26</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-sat fc-widget-content fc-future fc-last">
                                            <div>
                                                <div class="fc-day-number">27</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="fc-week fc-last">
                                        <td class="fc-day fc-sun fc-widget-content fc-future fc-first">
                                            <div style="min-height: 155px;">
                                                <div class="fc-day-number">28</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-mon fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">29</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-tue fc-widget-content fc-future">
                                            <div>
                                                <div class="fc-day-number">30</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-wed fc-widget-content fc-other-month fc-future">
                                            <div>
                                                <div class="fc-day-number">1</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-thu fc-widget-content fc-other-month fc-future">
                                            <div>
                                                <div class="fc-day-number">2</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-fri fc-widget-content fc-other-month fc-future">
                                            <div>
                                                <div class="fc-day-number">3</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-sat fc-widget-content fc-other-month fc-future fc-last">
                                            <div>
                                                <div class="fc-day-number">4</div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="fc-view fc-view-basicWeek fc-grid f-hide">
                            <table width="100%" cellspacing="0" border="0" cellpadding="0">
                                <thead>
                                    <tr class="fc-first fc-last">
                                        <th class="fc-day-header fc-sun fc-widget-header fc-first">星期日 5/31</th>
                                        <th class="fc-day-header fc-mon fc-widget-header">星期一 6/1</th>
                                        <th class="fc-day-header fc-tue fc-widget-header">星期二 6/2</th>
                                        <th class="fc-day-header fc-wed fc-widget-header">星期三 6/3</th>
                                        <th class="fc-day-header fc-thu fc-widget-header">星期四 6/4</th>
                                        <th class="fc-day-header fc-fri fc-widget-header">星期五 6/5</th>
                                        <th class="fc-day-header fc-sat fc-widget-header fc-last">星期六 6/6</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="fc-week fc-first fc-last">
                                        <td class="fc-day fc-sun fc-widget-content fc-past fc-first">
                                            <div style="min-height: 730px;">
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-mon fc-widget-content fc-other-month fc-past">
                                            <div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-tue fc-widget-content fc-other-month fc-today fc-state-highlight">
                                            <div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-wed fc-widget-content fc-other-month fc-future">
                                            <div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-thu fc-widget-content fc-other-month fc-future">
                                            <div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-fri fc-widget-content fc-other-month fc-future">
                                            <div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fc-day fc-sat fc-widget-content fc-other-month fc-future fc-last">
                                            <div>
                                                <div class="fc-day-content">
                                                    <div style="position: relative; height: 0px;">&nbsp;</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--日历end-->
                </dl>
            </div>
        </div>
        <!--右侧start-->

        <div class="layout_content_sidebar in">
            <ul class="layout_content_sidebar_header">
                <li class="active"> <a href="javascript:;">日程</a> </li>
                <li> <a href="javascript:;">任务</a> </li>
            </ul>
            <div class="hr"></div>
            <div class="sidebarcon">
                <ul class="nav_list">
                    <li class="menu ng-scope checked"> <a href="javascript:;" class="ng-binding"> <i class="mr_5 icon-ok"> </i>熟悉 Worktile </a> </li>
                </ul>
                <ul class="nav_list f-hide">
                    <li class="group-menu active"> <a href="javascript:;"> <i class="mr_5 icon-check"></i> 我的任务<i class="icon-ok ng-scope"></i></a> </li>
                </ul>
            </div>
            <div class="layout_content_sidebar_footer">
                <div class="hr"></div>
                <a href="javascript:;"><i class="mr_10 icon-eye-open"></i> <span class="ng-binding">只显示我的日程</span></a>
            </div>
        </div>
        <!--右侧日历end-->
    </div>
</div>
<script type="text/javascript" src="/Content/Js/common.js"></script>
<script src="~/Scripts/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
    $(function () {
        //右侧切换
        $("#righttoggle").click(function () {
            if ($(this).find("i").hasClass("icon-step-forward")) {
                $(".layout_content_sidebar").hide();
                $(this).find("i").removeClass("icon-step-forward").addClass("icon-step-backward");
                $(".g-main .layout_content_main").css("margin-right", "0");
            }
            else {
                $(".layout_content_sidebar").show();
                $(this).find("i").removeClass("icon-step-backward").addClass("icon-step-forward");
                $(".g-main .layout_content_main").css("margin-right", "240px");
            }
        })

        $(".layout_content_sidebar_footer").click(function () {
            if ($(this).find("i").hasClass("icon-eye-open")) {
                $(this).find("i").removeClass("icon-eye-open").addClass("icon-eye-close");
                $(this).find("span").html("显示全部日程");
            }
            else {
                $(this).find("i").removeClass("icon-eye-close").addClass("icon-eye-open");
                $(this).find("span").html("只显示我的日程");
            }
        })

        $(".layout_content_sidebar_header li").click(function () {
            $(".layout_content_sidebar_header li").removeClass("active");
            $(this).addClass("active");
            var ind = $(".layout_content_sidebar_header li").index($(this));
            $(".nav_list").removeClass("f-show").addClass("f-hide");
            $(".layout_content_sidebar_header li").parents(".layout_content_sidebar").find(".nav_list").eq(ind).removeClass("f_hide").addClass("f-show");
        })


        //日历右侧内容高度
        $(".sidebarcon").css("height", (document.body.offsetHeight - 160).toString() + 'px');
        window.onresize = function () {
            $(".sidebarcon").css("height", (document.body.offsetHeight - 160).toString() + 'px');
        }
        //日历高度
        $(".layout_content_main_nonav").css("height", (document.body.offsetHeight - 118).toString() + 'px');
        window.onresize = function () {
            $(".layout_content_main_nonav").css("height", (document.body.offsetHeight - 118).toString() + 'px');
        }

        //日历月周的切换
        $(".monthbtn").click(function () {
            $(".monthbtn").parents(".btn-group").find("button").removeClass("active");
            $(this).addClass("active");
            $(".fc-view-month").removeClass("f-hide").addClass("f-show");
            $(".fc-view-basicWeek").removeClass("f-show").addClass("f-hide");
        })

        $(".weekbtn").click(function () {
            $(".monthbtn").parents(".btn-group").find("button").removeClass("active");
            $(this).addClass("active");
            $(".fc-view-month").removeClass("f-show").addClass("f-hide");
            $(".fc-view-basicWeek").removeClass("f-hide").addClass("f-show");
        })


        $(".sidebarcon").mCustomScrollbar({
            scrollButtons: {
                enable: false
            },
            advanced: {
                updateOnContentResize: true
            }
        })

        $(".layout_content_main_nonav").mCustomScrollbar({
            scrollButtons: {
                enable: false
            },
            advanced: {
                updateOnContentResize: true
            }
        })




    })
</script>